<template>
	<div class="contents">
		<div class="contetn_left">
			<Left1CategoryBase style="height: 30%;" />
			<Left2CategorySale style="height: 40%;" />
			<Left3CategoryProduct style="height: 30%;" />
		</div>
		<div class="contetn_center"><Center1CategoryMap style="height: 100%;" /></div>
		<div class="contetn_right">
			<Right1CategorySaleWay style="height: 40%;" />
			<Right2CategoryVillage style="height: 60%;" />
		</div>
	</div>
</template>

<script>
import Left1CategoryBase from './components/Left1CategoryBase.vue';
import Left2CategorySale from './components/Left2CategorySale.vue';
import Left3CategoryProduct from './components/Left3CategoryProduct.vue';
import Center1CategoryMap from './components/categoryMap';
import Right1CategorySaleWay from './components/Right1CategorySaleWay.vue';
import Right2CategoryVillage from './components/Right2CategoryVillage.vue';

export default {
	components: {
		Left1CategoryBase,Left2CategorySale,Left3CategoryProduct,	
		Center1CategoryMap,
		Right1CategorySaleWay,Right2CategoryVillage
	},
	data() {
		return {};
	},

	methods: {}
};
</script>
<style lang="scss" scoped>
// 内容
.contents {	
	width: 100%;
	height: calc(100% - 150px);
	box-sizing: border-box;
	padding: 20px;
	display: flex;
	flex-direction: row;
	gap: 20px;
	justify-content: space-between;
	min-height: calc(100% - 150px);

	//左边 右边 结构一样
	.contetn_left,
	.contetn_right {
		width: 30%;		
		display: flex;
		flex-direction: column;
		gap: 20px;
		justify-content: space-around;
		position: relative;
	}
	// 中间
	.contetn_center {
		width: 40%;
		display: flex;
		flex-direction: column;
		gap: 20px;
		justify-content: space-around;
	}
}

@keyframes rotating {
	0% {
		-webkit-transform: rotate(0) scale(1);
		transform: rotate(0) scale(1);
	}
	50% {
		-webkit-transform: rotate(180deg) scale(1.1);
		transform: rotate(180deg) scale(1.1);
	}
	100% {
		-webkit-transform: rotate(360deg) scale(1);
		transform: rotate(360deg) scale(1);
	}
}
</style>
